<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-确认订单</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/LArea.css">
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=0708">
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
	</head>
	<style>
  .userInfoBox{padding:.68rem;background: #fff;margin-top: .6rem;}
  .userInfoBox .userImg{width:2.27rem;height:2.27rem;border-radius: 50%;margin-right: .68rem;}
  .userInfoBox .user_info h3{font-size:.77rem;color:#333333;}
  .userInfoBox .user_info p{font-size:.54rem;color:#666;margin-top: .2rem;}
 </style>
	<body>
		<!-- 个人中心 --> 
		<!-- <form action="./pay_course" method="post" class="setList"> -->
			<!-- <input type="hidden" name="course_id" value="{$info.id}"> -->
		<div class="confirmOrderIndex">
			<!-- 邀请人信息 -->
			<notempty name="pinfo">
		    <div class="userInfoBox flex alitemCenter">
		     <img src="{$pinfo.logo}" alt="" class="userImg">
		     <div class="user_info">
		      <h3>{$pinfo.nickname}</h3>
		      <p>邀请您加入启蒙优选，一起育儿育己！</p >
		     </div>
		    </div>
		    </notempty>

			<div class="content">
				<!-- 地址信息 -->
				<div class="address">
					<div class="_item flex juscbtween">
						<b>收货人：</b>
						<input type="text" class="recipients" placeholder="请输入收货人姓名" <notempty name='$info.recipients'>value="{$info.recipients}"</notempty>>
					</div>
					<div class="_item flex juscbtween">
						<b>手机号：</b>
						<input type="text" class="mobile"  placeholder="请输入上课及收货手机号" <notempty name='$info.mobile'>value="{$info.mobile}"</notempty>>
					</div>
					<div class="_item flex juscbtween">
						<b>确认手机号：</b>
						<input type="text" class="confirm_mobile"  placeholder="请再次输入手机号" <notempty name='$info.mobile'>value="{$info.mobile}"</notempty>>
					</div>


					<if condition="$info.if_site eq 1">
						<div class="_item flex juscbtween">
							<b>收货地址：</b>
							<input type="text" class="province"  readonly="readonly"  placeholder="请选择省市区" id="addressCity" <notempty name='$info.province'>value="{$info.province},{$info.city},{$info.district}"</notempty>>
							<input type="hidden" value="" id="addressCityValue">
						</div>
						<div class="_item flex juscbtween">
							<b>详细地址：</b>
							<input type="text" class="site"  placeholder="请输入详细地址（如：**街 **号**）" <notempty name='$info.site'>value="{$info.site}"</notempty>>
						</div>
					</if>
					

					<if condition="$info.if_collection eq 1">
						<div class="_item flex juscbtween">
							<b>孩子年龄：</b>
							<input type="number" class="baby_age" placeholder="请输入孩子的年龄" value="">
						</div>
					</if>


					<if condition="$info.if_birthday eq 1">
						<div class="_item flex juscbtween">
							<b>孩子生日：</b>
							<input type="number" class="baby_birthday" placeholder="请输入孩子的生日" value="">
						</div>
					</if>


					<if condition="$info.if_nickname eq 1">
						<div class="_item flex juscbtween">
							<b>孩子名字：</b>
							<input type="number" class="baby_name" placeholder="请输入孩子的名字" value="">
						</div>
					</if>

				</div>
				<!-- 订单商品详情 -->
				<div class="good_info">
					<div class="flex alitemCenter">
						<div class="good_img">
							<img src="{$info.xt_logo}" alt="">
						</div>
						<div class="good_name flex flexdirection juscbtweenOnly">
							<h3>{$info.title}</h3>
							<p><i>￥</i>{$info.sell_money}</p>
						</div>
					</div>
					<div class="item flex juscbtweenOnly">
						<div class="left">发货方式：</div>
						<div class="right">
							<if condition="$info.attend_type eq 1">
								手机
							<elseif condition="$info.attend_type eq 2">
								兑换码
							<elseif condition="$info.attend_type eq 3">
								快递
							</if>
							<span>（{$info.activate_time}）</span>
						</div>
					</div>

					
					<div class="item flex juscbtweenOnly">
						<div class="left">运费：</div>
						<div class="right">
							{$info.postage}
						</div>
					</div>

					<if condition="$info.attend_type neq 3">
						<div class="item flex juscbtween">
							<div class="left">上课方式：</div>
							<div class="right"><a href="./course_way?course_id={$info.id}">查看上课方式  ></a></div>
						</div>
					</if>


					
					<div class="item flex juscbtween">
						<div class="left">退货政策：</div>
						<div class="right">{$info.refund}</div>
					</div>
				</div>
				<!-- 支付方式 -->
				<div class="pay_list">
					<div class="pay_item flex juscbtween">
						<div class="left">
							<img src="__TMPL__/home/public/assets/img/wechat.png" alt="">
							<b>微信支付</b>
						</div>
						<div class="right">
							<input type="radio" checked name="pay_type" id="radio1">
							<label for="radio1"></label>
						</div>
					</div>
					<!--<div class="pay_item flex juscbtween">
						<div class="left">
							<img src="__TMPL__/home/public/assets/img/balance.png" alt="">
							<b>余额</b>
						</div>
						<div class="right">
							<input type="radio" name="pay_type" id="radio2">
							<label for="radio2"></label>
							<span class="hide">（余额不足）</span>
						</div>
					</div>-->
				</div>

				<!-- 底部支付吸底框 -->
				<div class="pay_foor_box flex juscbtween">
					<div class="left"><span>合计：</span><b><i>￥</i>{$info.sell_money + $info.postage}</b></div>
					<div class="right">
						<button type="submit" id="goBuyNow">确认支付</button>
					</div>
				</div>
			</div>
		</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/LAreaData1.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/LAreaData2.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/LArea.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			var order_id;
			var area1 = new LArea();
		    area1.init({
		        'trigger': '#addressCity', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
		        'valueTo': '#addressCityValue', //选择完毕后id属性输出到该位置
		        'keys': {
		            id: 'id',
		            name: 'name'
		        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
		        'type': 1, //数据源类型
		        'data': LAreaData //数据源
		    });
		    area1.value=[1,13,3];//控制初始位置，注意：该方法并不会影响到input的value

		    //点击支付
		    $('#goBuyNow').click(function(){
		    	var course_id = getUrlParam('course_id'),
		    	recipients = $('.recipients').val(),
		    	mobile = $('.mobile').val(),
		    	confirm_mobile = $('.confirm_mobile').val(),
		    	province = $('.province').val(),
		    	site = $('.site').val(),
		    	baby_age =$('.baby_age').val()||'';
		    	baby_birthday =$('.baby_birthday').val()||'';
		    	baby_name =$('.baby_name').val()||'';
		    	// isCanText = false;
		    	// if({$info.if_collection} == 1){
		    	// 	isCanText = true;
		    	// }
		    	if(!recipients){
		    		return layer.msg('请填写姓名')
		    	}else if(!mobile){
		    		return layer.msg('请填写手机号码')
		    	}else if(!confirm_mobile){
		    		return layer.msg('请确认手机号码')
		    	}else if(mobile != confirm_mobile){
		    		return layer.msg('两次手机号码不一致')
		    	}

		    	if({$info.if_site} == true)
		    	{	
		    		if(!province){
		    			return layer.msg('请选择地址')
			    	}else if(!site){
			    		return layer.msg('请填写详细地址')
			    	}
		    	}
		    	
		    	// else if(isCanText && !baby_age){
		    	// 	return layer.msg('请输入孩子的年龄')
		    	// }
			    $.ajax({
			      url: '/pay_course',
			      type: 'post',
			      cache:false,//这里
         		  ifModified :true ,
			      data: {
			      	'course_id':course_id,
			        'recipients': recipients,
			        'mobile': mobile,
			        'province': province,
			        'site': site,
			        'baby_age' : baby_age,
			        'baby_birthday': baby_birthday,
			        'baby_name' : baby_name,
			      },
			      success: function success(d) {
			      	if(d.code == 200){
			      		order_id = d.data.order_id;
			      		onBridgeReady(d.data);
			      	}else{
			      		return layer.msg(d.msg);
			      	}
			      },
			      error: function error(e) {
			        console.log(e);
			      }
			    })
		    })
		    function onBridgeReady(d){
			   	WeixinJSBridge.invoke(
			      	'getBrandWCPayRequest', {
				        "appId":d.appId,//公众号名称，由商户传入     
				        "timeStamp":d.timeStamp,//时间戳，自1970年以来的秒数     
				        "nonceStr":d.nonceStr, //随机串     
				        "package":d.package,  
				        "signType":"MD5",//微信签名方式：     
				        "paySign":d.paySign //微信签名 
			      	},
			      	function(res){
			      		console.log(res)
			      		if(res.err_msg == "get_brand_wcpay_request:ok"){
			      			location.href="/pay_success?order_id="+order_id;
			      		}
			   		}
			  	)
			}


			function getUrlParam(name){
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			    if (r != null) return unescape(r[2]); return null; //返回参数值
			};
		})
	</script>
</html>
